<template>
  <div class="foot">
    <div class="foot-nav">
      <div @click="vfun_index" :class="{active:vue_index}">
        <em class="iconfont">&#xe6a6;</em>
        首页
      </div>
      <div @click="vfun_class" :class="{active:vue_classify}">
        <em class="iconfont">&#xe603;</em>
        分类
      </div>
      <div @click="vfun_order" :class="{active:vue_order}">
        <em class="iconfont">&#xe608;</em>
        订单
      </div>
      <div @click="vfun_call"  :class="{active:vue_cart}">
        <em class="iconfont badge">&#xe65d;<i v-show='vue_badge_num!=0'>{{vue_badge_num | badge}}</i></em>
        购物车
      </div>
    </div>
    <share-out @closeShowBtn="closeShow_share" v-show="shareShow" :closeShare="shareShow"></share-out>
  </div>
</template>

<script>
  import shareOut from '../../components/share/share';
  export default {
    components:{shareOut},
    name: 'footer',
    data () {
      return {
        shareShow:false,   //分享框弹出
        vue_badge_num:0,     //购物车数量
        vue_index:false,   //点击店铺（首页）显示选中效果
        vue_classify:false,   //点击店铺（分类）显示选中效果
        vue_order:false,   //点击店铺（订单）显示选中效果
        vue_cart:false,  //点击店铺（购物车）显示选中效果
      }
    },
    methods:{
      //购物车数量查询
      vFun_badge_cart() {
        if (localStorage.getItem("memberCode") != null) { //只有登录之后，才查询
          this.axios({
            method:"POST",
            url:"/v3/sale/cartGoodss/listAll",
            data:{}
          }).then((res)=>{
            this.vue_badge_num=res.data.list.reduce((countNum,item)=>{
              return countNum+item.goodsBuyNum
            },0)
          }).catch((err)=>{
          })
        }else{
        }
      },

      //店铺首页
      vfun_index(){
        this.$router.push({path:"/shopHomePage"})
      },

      //店铺分类
      vfun_class(){
        this.$router.push({path:"/classify"})
      },

      //店铺订单
      vfun_order(){
        this.$router.push({path:"/bill"})
      },

      //店铺购物车
      vfun_call(){
        this.$router.push({path:"/cartShopping"})
      },

      //关闭分享弹出框
      closeShow_share(){
        this.shareShow = false;
      },

      //点击单行（推广）按钮
      extendBtn(item,index){
        this.shareShow = true;
      },
    },
    filters:{
      badge:function(val){
        return val>99?'99+':val;
      }
    },
    activated(){
      this.vFun_badge_cart();  //请求badge数据
      if (this.$route.path=='/shopHomePage') {
        this.vue_index=true;
      }
      if (this.$route.path=='/classify') {
        this.vue_classify=true;
      }
      if (this.$route.path=='/bill') {
        this.vue_order=true;
      }
      if (this.$route.path=='/cartShopping') {
        this.vue_cart=true;
      }
    },
    mounted(){}
  }
</script>


<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  .active{
    color: #D50B0A;
  }
  .active em{
    color: #D50B0A;
  }
  .foot{
    position: fixed;
    bottom: 0;
    height: 1.6rem;
    width: 100%;
    color: #888;
    z-index: 100;
    box-shadow: 3px 0px 5px #ccc;
    background: #fff;
    padding-top: 0.1rem;
  }
  .foot-nav{
    display: -webkit-box;
  }
  .foot-nav div{
     -webkit-box-flex: 1;
    text-align: center;
    font-size: 14px;
  }
  .foot-nav div em{
    font-size: 22px;
    display: block;
  }
  /* start 徽章 */

  .badge {
    position: relative;
  }

  .badge>i {
    position: absolute;
    top: 0rem;
    right: .5rem;
    padding: 2px 4px;
    background: red;
    border-radius: 3px;
    font-size: 0.2rem;
    line-height: 1;
    color: #fff;
  }
  /* end 徽章 */
</style>
